<template>
	<view>
		<view style="width: 750rpx;height:420rpx;background:#E71121;">
			<!-- 图片占位 -->
			<!-- <image src="https://master.chunfengbuy.com/attachment/images/2020/09/19/image_1600485342_F80wvGZr.png" mode="" class="w-100 h-100"></image> -->
		</view>
		<!-- 背景颜色 -->
		<view class="header-bg"></view>
		<view class="newproducts-list">
			<view class="newproducts-item rounded bg-white mb-2 d-f" v-for="(item,index) in newproductsList" :key="index" @click="toProduct(item.id)">
				<image :src="item.slide_list.img" mode="" class="product-img rounded"></image>
				<view class="flex-1 ml-2 mr-3 mt-2">
					<view class="in2line mb-4 font-w font-s-4" style="height: 80rpx;">
						<text class="bg-color rounded font-s-1" style="padding: 1rpx 2rpx;">新品上市</text>
						<text class="product-name-text">{{ item.title }}</text>
					</view>
					<view class="text-main-color font-s-2 font-w"><text class="iconfont icon-remai mr-1"></text>累计购买{{ item.sold_count }}</view>
					<view class="d-f justify-between mt-3">
						<view class="d-f align-end">
							<view class="font-s-6 font-w text-main-color "><text class="font-s-2">￥</text>{{ item.price }}</view>
							<view class="font-s-2 text-de ml-2">￥{{ item.market_price }}</view>
						</view>
						<view class="bg-color rounded row-a-j-fc" style="width: 138rpx;height: 68rpx;">
							<view class="font-s-2">立即抢购</view>
							<view class="row-ac">
								<view class="" style="width: 80rpx;height: 10rpx;background-color: rgba(255,255,255,0.3);">
									<view style="width: 50rpx;height: 10rpx;background-color: #FFFFFF; "></view>
								</view>
								<view class="font-s-small ml-1">92%</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getNewGoods } from '@/api/index.js'
	
	export default {
		components: {
			
		},
		filters:{
			
		},
		data(){
			return{
				newproductsList:[]
			}
		},
		onLoad(){
			this.initData()
		},
		methods:{
			initData(){
				this.getNewGoodsList()
			},
			getNewGoodsList(){
				this.$R.get(getNewGoods)
				.then((res)=>{
					this.newproductsList = res.data.list
				})
			},
			toProduct(productId){
				uni.navigateTo({
					url: '/pages/product/product?productId='+productId,
				});
			}
		}
	}
	
</script>

<style lang="scss">
	page{
		background-color: $uni-bg-color-grey;
	}
	.header-bg{
		width: 750RPX;
		height: 180rpx;
		background: -webkit-gradient(linear, 0 50%, 0 100%,from(#E71121), to(#F5F5F5));
	}
	.product-name-text{
		vertical-align: bottom;
	}
	.newproducts-list{
		width: 722rpx;
		margin: -190rpx 14rpx 0 14rpx;
		.newproducts-item{
			width: 722rpx;
			height: 300rpx;
			.product-img{
				width: 290rpx;
				height: 290rpx;
				margin-left: 5rpx;
			}
		}
	}
</style>
